I'm new to Processing and to programming, so forgive me if this is an annoyingly rudimentary question. I would like to cluster pixels in certain areas of the window and move the cluster, while colors are changing gradually. Trying to get an ambient-like effect. I know putting them in an array would be the most practical. What I have so far:

size(500,500);

loadPixels(); for(int x = 0; x < width; x++){ for(int y = 0; y < height; y++){ pixels[x+y*width] = color(0,y/2,x/2); } } updatePixels();

final int kGlitchState=0;
final int kCamState=1;

int state=kCamState;


// ---------------------------------

final int kGlitchTimeLapse=7000;  // 2 secs
final int kCamTimeLapse=5000;    //8 secs
int triggerTime;

// ---------------------------------


import processing.video.*; 
Capture cam; 
Capture video;



void setup() { 
  size(1024, 768); 
  imageMode(CENTER);

  glitches = new ArrayList <GlitchClass>();
  for (int i=0; i<kTotalGlitches; i++)
    glitches.add(new GlitchClass());

  cam = new Capture(this);
  cam.start();
  triggerTime=millis()+kCamTimeLapse;
  img = cam;
  video = new Capture(this, width, height);
  video.start();
} 

void draw() { 

  if (millis()>=triggerTime) {

    if (state==kCamState) {
      state=kGlitchState;
      triggerTime+=kGlitchTimeLapse;
      currGlitch=int(random(kTotalGlitches));  //Select new glitch
    } else {
      state=kCamState;
      triggerTime+=kCamTimeLapse;
    }
  }

  if (state==kCamState)
    image(cam, width/2, height/2);
  else {
    background(0);
    glitches.get(currGlitch).display();
  }
} 


void captureEvent(Capture camera) {
  camera.read();

  img = createImage(width, height, RGB);
  video.loadPixels();
  arrayCopy(video.pixels, img.pixels);
}


//A glitch is just two ellipses overlapping on top of each other with different
//colors and one being rotated by 90 degrees.
class GlitchClass {

  void display() {

    loadPixels();

    int randPos = 0;
    if (frameCount  % 100 == 0)
      randPos = (int)random(0, video.height -4);

    int randPosY = 0;

    // if (frameCount  % 100 == 0)
    randPosY = (int)random(20, 50);

    // Begin a loop for displaying pixel rows of 4 pixels height
    for (int y = 0; y < video.height -57; y++) {
      if (img != null) {
        img.loadPixels();

        // Put 4 rows of pixels on the screen
        if (frameCount % 50 == 0)
          randPosY = (int)random(20, 50);
        for (int x = 0; x < video.width; x++) {
          if (frameCount % 100 == 0)
            randPosY = (int)random(20, 50);
          if (y < video.height -4) {
            pixels[x + (y + 0 + randPosY)* width] = img.pixels[  (y + 0 )* video.width + randPos + x];
            pixels[x + (y + 1 + randPosY) * width] = img.pixels[ (y + 1) * video.width + randPos + 1 + x];
            pixels[x + (y + 2 + randPosY) * width] = img.pixels[ (y + 2) * video.width + randPos + 2 + x];
            pixels[x + (y + 3 + randPosY) * width] = img.pixels[ (y + 3) * video.width + randPos + 3 + x];

            pixels[x + (y + 4 + randPosY)* width] = img.pixels[  (y + 4 )* video.width + randPos + 4 + x];
            pixels[x + (y + 5 + randPosY) * width] = img.pixels[ (y + 5) * video.width + randPos + 5 + x];
            pixels[x + (y + 6 + randPosY) * width] = img.pixels[ (y + 6) * video.width + randPos + 6 + x];
            pixels[x + (y + 7 + randPosY) * width] = img.pixels[ (y + 7) * video.width + randPos + 7 + x];
          }
        }
      } else {
        break;
      }
    }

    updatePixels();
  }
}

Thanks!

code below:

import ipcapture.*;

IPCapture cam1;

// Circular buffer
PImage[] cam1_buffer; 

// These determine the size of the circular buffer and help iterate while writing and reading through them
int nFrames = 1;
int iWrite = 0, iRead = 1;

// Track color var
color trackColor;

//top layer drawing thing
PGraphics topLayer;

void setup() {

  size(704, 480);

  cam1 = new IPCapture(this, "http://" + "155.41.145.37/mjpg/video.mjpg", "", "");
  cam1.start();
  // If the camera resolution isn't explicitely defined the PImage.get() method will give strange results
  cam1.pixelWidth = 704;
  cam1.pixelHeight = 480;

  cam1_buffer = new PImage[nFrames];

  //Track color vars
  colorMode(RGB,255,255,255,100);
  trackColor = color(255,0,64);
  noFill();
  smooth();
  strokeWeight(4.0);
  stroke(0);

  //create a top layer for circles
  topLayer = createGraphics(width, height, g.getClass().getName());

}

void draw() {
  if (cam1.isAvailable()) {
    cam1.read();
    cam1_buffer[iWrite] = cam1.get();
  if(cam1_buffer[0] != null){
  // The original camera image is displayed correctly at 480x300 in the upper left corner          
  image(cam1,0,0);
  }
}

  //Track colors below
  loadPixels();


  //Color tracking vars
  float closestDiff = 500.0f;
  int closestX = 0;
  int closestY = 0;

  //Loop through every pixel
  for (int x = 0; x < cam1.pixelWidth; x++){
    for (int y = 0; y < cam1.pixelHeight; y++){
      int loc = x + y*cam1.pixelWidth;

      //what is current color
      color currentColor = cam1.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      float r2 = red(trackColor);
      float g2 = green(trackColor);
      float b2 = blue(trackColor);

      //Using euclidean distance to compare colors
      float d = dist(r1,g1,b1,r2,g2,b2);

      //If current color is more similar to tracked color than
      //closest color, save current location and current difference
      if (d < closestDiff) {
        closestDiff = d;
        closestX = x;
        closestY = y;
      }
    }
  }

  //create a threshold
  //then create a circle at the tracked color

  if (closestDiff < 100) {
    topLayer.beginDraw();
    topLayer.noFill();
    topLayer.strokeWeight(4.0);
    topLayer.stroke(trackColor);
    topLayer.ellipse(closestX, closestY, 50, 50);
    topLayer.endDraw();
    image(topLayer, 0, 0);

  } 
}

Here is Image_Filters

PImage img; //<>// //<>// //<>// //<>// //<>//

void setup()
{
  size(600, 600);
  img = loadImage("2.jpg");
  surface.setSize(img.width, img.height);
  noLoop();
}

void draw()
{
  test(img);
  image(img, 0, 0);
}

and here is testDraw

void test(PImage image)
{
  PImage temp = image;

  float kernel[][] = { {-1, -1, -1}, //Outlines
    {-1, 8, -1}, 
    {-1, -1, -1} };

  //float kernel[][] = { {0.0625, 0.125, 0.0625}, //Blur
  //  {0.125, 0.25, 0.125}, 
  //  {0.0625, 0.125, 0.0625} };

  temp.loadPixels();
  for (int x = 0; x < image.width; x++)
  {
    for (int y = 0; y < image.height; y++)
    {
      color newColor = applyFilter(x, y, kernel, temp);
      img.pixels[x + y * image.width] = newColor;
    }
  }
  img.updatePixels();
}

color applyFilter(int x, int y, float matrix[][], PImage image)
{
  float rTotal = 0;
  float gTotal = 0;
  float bTotal = 0;

  for (int i = 0; i < 3; i++)
  {
    for (int j = 0; j < 3; j++)
    {
      int location = constrain((x + i - 1) + (y + j - 1) * image.width, 
        0, image.pixels.length - 1);
      rTotal += (image.pixels[location] >> 16 & 0xFF) * matrix[i][j];
      gTotal += (image.pixels[location] >> 8 & 0xFF) * matrix[i][j];
      bTotal += (image.pixels[location] & 0xFF) * matrix[i][j];
    }
  }
  rTotal = constrain(rTotal, 0, 255);
  gTotal = constrain(gTotal, 0, 255);
  bTotal = constrain(bTotal, 0, 255);
  return color(rTotal, gTotal, bTotal);
}

Okay, this is the problem...

Original:

Filter Applied:

Also, can someone explain what //<>// at the top of my main file is for? Processing did that by itself.

If I forgot to explain something please just ask.

Thank you very much for your help.

import processing.video.*; 
int numPixels;
int[] previousFrame;
Capture video;

void setup(){
  size (640, 480);
  video = new Capture (this, width, height);
  numPixels = video.width * video.height;
  previousFrame = new int[numPixels];
  video.start();

}

void draw() {
  if (video.available()){
    video.read();
    video.loadPixels();
    int movementSum=0;
    loadPixels();

    for (int i = 0; i < numPixels; i++){
      color currColor = video.pixels[i];
      color prevColor = previousFrame[i];

      int currR = (currColor >> 16) & 0xFF;
      int currG = (currColor >> 8) & 0xFF;
      int currB = currColor & 0xFF;

      int prevR = (currColor >> 16) & 0xFF;
      int prevG = (currColor >> 8) & 0xFF;
      int prevB = currColor & 0xFF;

      int diffR = abs(currR - prevR);
      int diffG = abs(currG - prevG);
      int diffB = abs(currB - prevB);

      movementSum += diffR + diffG + diffB;
      pixels[i] = color(diffR,diffG,diffB);
      previousFrame[i] = currColor;
    }

   if (movementSum > 0){
     updatePixels();
     println(movementSum);
   }
  }
}

function preload() { img1 = loadImage("Assets/randimage2.png"); }

function setup() { createCanvas(img1.width, img1.height);

}

function draw() { image(img1);

loadPixels();

for (var y = 0; y < height; y++) { for(var x = 0; x < width; x++) { var index = (x + y * width)*4; pixels[index+0] *2; pixels[index+1] = 200; pixels[index+2] = 255; pixels[index+3] = 105; } }

updatePixels(); }

I'm trying to get the output of my canvas to perform blob detection on. How could I do this? I currently get the output of my cam, but I want to replace this with the output that is shown on the canvas (as I have performed some pixel editting on it)

Thanks

So basically I want to get the r, g and b values of my current mouse position. Now, I want this sketch to work irrespective of the window size (which happens to be 600x900 at the moment) - so I'm resizing using the resize function. Do i need to use loc = x + y*width differently now? And a little confused how to translate that to my current mouse position as well. Haven't really used PImage till now in Processing even though I've been using P5 for generative art for a while now. Some nice links would also be welcome, while the snippets in the reference give some ideas it's not really conceptually enlightening for bigger projects.

and we are looking at 2D Noise and the author presents this code:

loadPixels();
for (int x = 0; x < width; x++) {
  for (int y = 0; y < height; y++) {
    float bright = random(255);
    pixels[x+y*width] = color(bright);
  }
}
updatePixels();

The author then goes on to show how we can use noise() instead of random. But Im confused as to the code snippet and how it creates noise. So this is what I do understand:

1. it loads all pixels?
2. then the first for loop checks if x is < width and moves over by 1. So if the pixel was (5,5), x=6.
3. then the next loop checks if y is < height and moves over by 1. So y=6, thus (6,6)
4. it creates a random brightness value
5. finally sets that brightness to an array called pixel at the element [5+5*width] ?

I am trying to make a 2D noise texture in P5.JS.

I know how to write it in Processing but I can't convert my thinking to the 4 pixel array style of P5. Below if how I am writing the texture with a random function but I would like to change this to noise to create the classic cloud effect.

Thanks a lot, Steven

function setup() {
    var myCanvas = createCanvas(700, 801);
    pixelDensity(1);    
}

function draw(){
    background(255);
    loadPixels();

    for(var y = 0; y < height; y++) {
        for(var x = 0; x < width; x++) {
            var index = (x + y * width)*4;
            pixels[index+0] = random(255);
            pixels[index+1] = 0;
            pixels[index+2] = 180;
            pixels[index+3] = 255;
        }
    }
    updatePixels();
}

I'm looking for some help with a simple way of saving the frame of a sketch as a png with no background, other than the drawn lines from the script. The sketch essentially reproduces a given image through a series of generated traceur lines, I've included the sketch for reference and it's something I found so I don't fully understand how it works. I'm new to processing so I apologize if this is really basic or if I'm missing something but after looking around, it seems surprisingly more complicated than I initially thought to render with no background. I'm using the latest version of processing 3 by the way.

PGraphics alphaG;

PImage g;
traceur[] traceurs;

void setup(){
size(2500,800);


   alphaG = createGraphics(width,height, JAVA2D);

  g = loadImage("climate.png");

  traceurs = new traceur[0];
  background(255);
  stroke(126,24,175,20);
  for(int a=0;a<120;a++){
    traceurs = (traceur[]) append (traceurs, new traceur());
  }

}

void draw(){
  for(int a=0;a<traceurs.length;a++){
   traceurs[a].dessine(); 
  } 

 image(alphaG, 0,0);
}

class traceur{
    float x,y,an,v;
    float[] rang={-0.05,0.05};
  traceur(){
    x= random(width);y=random(height);
    an=random(TWO_PI);v=random(1.2,1.5);
   rang[0]=random(-0.1,-0.05);
   rang[1]=random(0.05, 0.1);
  }
  void dessine(){
   an+=random(rang[0],rang[1]);
   float newx=x+cos(an)*v;
   float newy=y+sin(an)*v;
   if(newx<0||newx>width||newy<0||newy>height){
     newx=constrain(newx,0,width);
     newy=constrain(newy,0,height);
     an+=random(-PI,PI);
   rang[0]=random(-0.1,-0.05);
   rang[1]=random(0.05, 0.1);
   }
   if(random(100)<1){ 
   rang[0]=random(-0.1,-0.05);
   rang[1]=random(0.05, 0.1);
   }
   float angleChoisi=an;

   float couleur=brightness(g.get(int(newx),int(newy)));
   for(float a=an-PI*0.3;a<an+PI*0.3;a+=PI*0.15){
      int ixe=int(newx+cos(a)*v);
      int igr=int(newy+sin(a)*v);
      float col=brightness(g.get(ixe,igr));
      if(col<couleur){
        couleur=col;
        angleChoisi=a;
      }
   } 
   an=angleChoisi;
   if(random(100)<1){an=an+random(-1,1);}
   line(x,y,newx,newy);
   x=newx;y=newy;

}
  }


 void keyReleased(){
  saveFrame("img#####.png");
}

I found another code which I tried incorporating that is pretty helpful in rendering with no background, with some pretty clear instructions for beginners, it utilizes pgraphics to render, but since I don't fully understand how the initial code works, I've been having a hard time incorporating the various drawing steps. I've included the original file here for reference.

PGraphics alphaG;

void setup() {
size(1250,800); 
// create an extra pgraphics object for rendering on a transparent background 
 alphaG = createGraphics(width,height, JAVA2D);

// background will be transparent in the png-file 
background(255);
}

void draw() {

  // draw into the pgraphics object
  alphaG.beginDraw();
    alphaG.fill(255,100);
    alphaG.rect(random(width), random(height), 30,30); 
  alphaG.endDraw();

  // draw the second renderer into the window, so we can see something 
  image(alphaG, 0,0);
}

void keyPressed() {
   alphaG.save("alphatest.png"); 
   println("alphatest.png saved.");
}

Anyways, I hope what I'm asking makes some sense, and I would really appreciate anyone's help on this, thanks.

Best,
David

void setup() {
  size (600, 400);
  loadPixels();
  noStroke();
}

void draw() {
}

void circle_pixels(int cx, int cy, float rad, color c) {
  for (int x=0; x<600; x++) {
    for (int y=0; y<400; y++) {
      int idx = y*600+x;
      if (sq(x-cx) + sq(y-cy) <= sq(rad)) {
        pixels[idx] = c;
      }
    }
  }
  updatePixels();
}

void circle(int cx, int cy, float rad, color c) {
  fill(c);
  ellipse(cx, cy, rad, rad);
}

void mouseClicked() {
  background(128);
  color rand_color = color(int(random(255)), int(random(255)), int(random(255)));
  // This doesn't work. Old circles stick around.
  circle_pixels(300, 200, random(300), rand_color);
  // This works. Only shows one circle at once.
  //circle(300, 200, random(300), rand_color);
}

Can someone help me understand the difference in behaviour here?

If I am doing pixel manipulation, is the recommended way to clear the display just to set pixels[x,y] to grey for each (x,y) coordinate?

Using createImg() creates a p5.dom img object, as opposed to a p5.image, so I attempted to use loadImage(file.data) where file.data is the src as opposed to a string pointing to a local file. This returns a p5.image object, however the pixels[] array returns as pixels: Uint8ClampedArray[4] instead of 'pixels:Array[0]' when the same image is loaded in setup using var img = loadImage("test.jpg");, though my assumption is that there's no real difference between the two as it's just returning information about the buffer being used.

The interesting thing is that console logging the width and height of the image loaded in setup reads 1920 x 1080, whereas the width and height of the image loaded using drop() reads as 1 x 1, despite showing up in the debugger as having the same properties..

Any thoughts?

print out:

0
160000

It is all about porting examples from processing. So I was porting from https://processing.org/reference/PImage_loadPixels_.html

So my code

            var myImage;
            var halfImage;

            function preload(){
              myImage = loadImage("assets/rockies.jpg");
            }

            function setup(){
              myImage.loadPixels();
              halfImage = width*height/2;
              for(var i=0; i<halfImage; i++){
                myImage.pixels[i+halfImage] = myImage.pixels[i];
              }
              myImage.updatePixels();
            }

            function draw(){
              image(myImage, 0, 0);
            }

Is not producing expected result. Then I looked at the loadPixel() of p5 class.p5js.org/reference/#p5/loadPixels. I guess this too is not producing desired result. Need someones guidance here. About what is the error in my code for loadPixels() for p5.image above.

PS - To run the code quickly - 1. Open http://p5js.org/reference/#/p5.Image/set 2. Click "edit" in example, delete existing code and paste this. 3. rockies.jpg is present in the assets of p5js-website and is accessible here.

Sorry for big question I tried putting everything I have done for clarity.

import processing.video.*;

Capture cam;

PImage camR;
PImage camG;
PImage camB;

void setup() {
  size(640, 480);
  colorMode(RGB,255);
  frameRate(1);
  String[] cameras = Capture.list();

  if (cameras == null) {
    println("Failed to retrieve the list of available cameras, will try the default...");
    cam = new Capture(this, 640, 480);
  } if (cameras.length == 0) {
    println("There are no cameras available for capture.");
    exit();
  } else {
    println("Available cameras:");
    for (int i = 0; i < cameras.length; i++) {
      println(cameras[i]);
    }

    // The camera can be initialized directly using an element
    // from the array returned by list():
    cam = new Capture(this, cameras[0]);
    // Or, the settings can be defined based on the text in the list
    //cam = new Capture(this, 640, 480, "Built-in iSight", 30);

    // Start capturing the images from the camera
    cam.start();
  }
}

void draw() {
  if (cam.available() == true) {
    cam.read();
  }
  camR = cam;
  camG = cam;
  camB = cam;
  cam.loadPixels();
  camR.loadPixels();
  camG.loadPixels();
  camB.loadPixels();

  for (int i = 0; i < cam.width*cam.height; i++){

    camR.pixels[i] = color(red(cam.pixels[i]));
    camG.pixels[i] = color(green(cam.pixels[i]));
    camB.pixels[i] = color(blue(cam.pixels[i]));
  }
  cam.updatePixels();
  camR.updatePixels();
  camG.updatePixels();
  camB.updatePixels();
  image(cam,0,0,200,150);
  image(camR,200,0,200,150);
  image(camG,200,150,200,150);
  image(camB,200,300,200,150);

}

I'm expecting to see the full RGB image when I run image(cam...), but I end up just getting the greyscale RED channel. The "camG" and "camB" are also displaying the red channel.

Code for Background subtraction...

/** * Background Subtraction * by Golan Levin. * * GSVideo version by Andres Colubri. * * Detect the presence of people and objects in the frame using a simple * background-subtraction technique. To initialize the background, press a key. */

import codeanticode.gsvideo.*;

int numPixels; int[] backgroundPixels; GSCapture video;

void setup() { // Change size to 320 x 240 if too slow at 640 x 480 size(640, 480);

video = new GSCapture(this, width, height); video.start();
numPixels = video.width * video.height; // Create array to store the background image backgroundPixels = new int[numPixels]; // Make the pixels[] array available for direct manipulation loadPixels(); }

void draw() { if (video.available()) { video.read(); // Read a new video frame video.loadPixels(); // Make the pixels of video available // Difference between the current frame and the stored background int presenceSum = 0; for (int i = 0; i < numPixels; i++) { // For each pixel in the video frame... // Fetch the current color in that location, and also the color // of the background in that spot color currColor = video.pixels[i]; color bkgdColor = backgroundPixels[i]; // Extract the red, green, and blue components of the current pixel�s color int currR = (currColor >> 16) & 0xFF; int currG = (currColor >> 8) & 0xFF; int currB = currColor & 0xFF; // Extract the red, green, and blue components of the background pixel�s color int bkgdR = (bkgdColor >> 16) & 0xFF; int bkgdG = (bkgdColor >> 8) & 0xFF; int bkgdB = bkgdColor & 0xFF; // Compute the difference of the red, green, and blue values int diffR = abs(currR - bkgdR); int diffG = abs(currG - bkgdG); int diffB = abs(currB - bkgdB); // Add these differences to the running tally presenceSum += diffR + diffG + diffB; // Render the difference image to the screen pixels[i] = color(diffR, diffG, diffB); // The following line does the same thing much faster, but is more technical //pixels[i] = 0xFF000000 | (diffR << 16) | (diffG << 8) | diffB; } updatePixels(); // Notify that the pixels[] array has changed println(presenceSum); // Print out the total amount of movement } }

// When a key is pressed, capture the background image into the backgroundPixels // buffer, by copying each of the current frame�s pixels into it. void keyPressed() { video.loadPixels(); arraycopy(video.pixels, backgroundPixels); }

Code for frame differencing.....

/** * Frame Differencing * by Golan Levin. * * GSVideo version by Andres Colubri.
* * Quantify the amount of movement in the video frame using frame-differencing. */

import codeanticode.gsvideo.*;

int numPixels; int[] previousFrame; GSCapture video;

void setup() { size(640, 480); // Change size to 320 x 240 if too slow at 640 x 480 // Uses the default video input, see the reference if this causes an error video = new GSCapture(this, width, height); video.start();
numPixels = video.width * video.height; // Create an array to store the previously captured frame previousFrame = new int[numPixels]; loadPixels(); }

void draw() { if (video.available()) { // When using video to manipulate the screen, use video.available() and // video.read() inside the draw() method so that it's safe to draw to the screen video.read(); // Read the new frame from the camera video.loadPixels(); // Make its pixels[] array available

int movementSum = 0; // Amount of movement in the frame
for (int i = 0; i < numPixels; i++) { // For each pixel in the video frame...
  color currColor = video.pixels[i];
  color prevColor = previousFrame[i];
  // Extract the red, green, and blue components from current pixel
  int currR = (currColor >> 16) & 0xFF; // Like red(), but faster
  int currG = (currColor >> 8) & 0xFF;
  int currB = currColor & 0xFF;
  // Extract red, green, and blue components from previous pixel
  int prevR = (prevColor >> 16) & 0xFF;
  int prevG = (prevColor >> 8) & 0xFF;
  int prevB = prevColor & 0xFF;
  // Compute the difference of the red, green, and blue values
  int diffR = abs(currR - prevR);
  int diffG = abs(currG - prevG);
  int diffB = abs(currB - prevB);
  // Add these differences to the running tally
  movementSum += diffR + diffG + diffB;
  // Render the difference image to the screen
  pixels[i] = color(diffR, diffG, diffB);
  // The following line is much faster, but more confusing to read
  //pixels[i] = 0xff000000 | (diffR << 16) | (diffG << 8) | diffB;
  // Save the current color into the 'previous' buffer
  previousFrame[i] = currColor;
}
// To prevent flicker from frames that are all black (no movement),
// only update the screen if the image has changed.
if (movementSum > 0) {
  updatePixels();
  println(movementSum); // Print the total amount of movement to the console
}

} }

I'm having trouble setting up a sketch that overlays a video with transparency over another rolling video. The video is of a basketball game and the video with transparency has the stats of the game (a bar on the left of the screen).

What I would like to do is to have both videos playing at the same time (and firstly that's my problem). Secondly, I'd like to summon the video with transparency with a mouse click (for example) so that the stats would only be shown upon clicking. And clicking once again the stats would disappear. I was able to do this with the basketball video and with a png file (image above)...but not with a .mov file.

Is there someone that can help me with this?

Thanks in advance!

load initialPix1-100

get row 1 from each image and make finalpix_one from these rows

get row 2 from each image and make finalpix_two from these rows

get row 3 from each image and make finalpix_three from these rows

##########

void setup(){

size(400,400); img_one = loadImage("initial_one.jpg"); img_two = loadImage("initial_two.jpg"); img_three = loadImage("initial_three.jpg");

finalpix_one.set(0,0, initial_one.get(0,1,initial_one.width,1) ); finalpix_one.set(0,1, initial_two.get(0,1,initial_two.width,1) ); finalpix_one.set(0,2, initial_three.get(0,1,initial_three.width,1) );

finalpix_two.set(0,0, initial_one.get(0,2,initial_one.width,1) ); finalpix_two.set(0,1, initial_two.get(0,2,initial_two.width,1) ); finalpix_two.set(0,2, initial_three.get(0,2,initial_three.width,1) );

finalpix_three.set(0,0, initial_one.get(0,3,initial_one.width,1) ); finalpix_three.set(0,1, initial_two.get(0,3,initial_two.width,1) ); finalpix_three.set(0,2, initial_three.get(0,3,initial_three.width,1) );

My question is -- does this make sense or would it be easier to do this with pixels[] can anyone see an easy way to pick if this works with taking 2 rows at a time rather than a single row? If I keep spitting out to the final pix will it overwrite it or append like I want-- there has to be a way to do this that I am not seeing.

import processing.video.*;
int cell;
int col, row;
Movie m;

void setup() {
  size(640, 360); // 8 times mov
  m = new Movie(this, "m_80_45.mov"); //mov size is 80x45 pixels
  cell = 8;
  col = width/cell;
  row = height/cell;
}

void draw() {
  if (m.available()) {
    m.read();
  }
  m.loadPixels();
  for (int i=0; i<col; i++) {
    for (int j=0; j<row; j++) {
      int loc = i + j*m.width;
      color c = m.pixels[loc]; // this row has error! say: ArrayIndexOutOfBoundsException:0
      fill(c);
      int x = i*cell;
      int y = j*cell;
      rect(x, y, cell, cell);
    }
  }
}

I m a beginner to processing, and i would like to know if it would be possible to change img1 with a new movie"BD,mov". I want that move as the mask1.

Thanks for your help!!

PImage img1; PImage mask1; PImage img2; PImage mask2; import processing.video.*; Movie movie;

int threshold = 127;

color black = color(0); color white = color(255); int numPixels; Capture video;

void setup() { //size(1920,1280); size(1000, 800); strokeWeight(5);

//img1 = loadImage("bd2.jpg");

movie = new Movie(this, "bd.mov"); movie.loop(); img2 = loadImage("nagitive.jpg");

// imageMode(CENTER);

// example if it creates an error video = new Capture(this, width, height);

// Start capturing the images from the camera video.start();

numPixels = video.width * video.height; mask1 = createImage(width, height, RGB); mask2 = createImage(width, height, ALPHA); noCursor(); smooth(); }

//void mouseDragged() { //threshold = round(map(mouseX, 0, width, 0, 255)); //}

void movieEvent(Movie m) { m.read(); }

void draw() { background(0); if (video.available()) { video.read(); mask1.copy(video, 0, 0, video.width, video.height, 0, 0, mask1.width, mask1.height); numPixels = mask1.width * mask1.height; // video.loadPixels(); // int threshold = 127; // Set the threshold value float pixelBrightness; // Declare variable to store a pixel's color // Turn each pixel in the video frame black or white depending on its brightness mask1.loadPixels(); mask2.loadPixels(); for (int i = 0; i < numPixels; i++) { pixelBrightness = brightness(mask1.pixels[i]); if (pixelBrightness > threshold) { // If the pixel is brighter than the mask1.pixels[i] = white; // threshold value, make it white mask2.pixels[i] = black; } else { // Otherwise, mask1.pixels[i] = black; // make it black mask2.pixels[i] = white; } } mask1.updatePixels(); mask2.updatePixels(); }

//image(mask1, 0, 0, width/2, height/2); //image(mask2, width/2, 0, width/2, height/2);

mask1.resize(movie.width, movie.height); mask2.resize(img2.width, img2.height); movie.mask(mask1); img2.mask(mask2); blendMode(ADD); //image(img1, 0, height/2, width/2, height/2); //image(img2, width/2, height/2, width/2, height/2); image(movie, 0, 0, width, height); image(img2, 0, 0, width, height); }

The code and markings are written in Finnish, but I will try to clarify the code below a bit:

My questions:

1. So about NoLoop - function, where should I put it?

2. In my function pyorita(), which sends serial data to Arduino, which turns the scanner platter, I must have 1000ms delay, otherwise the program will crash. This makes my program run slow, though. Could this be optimized anyhow? (If I remove the delay, it will just print me "-1" "-1" "-1" in the console with red font (error))s

3. Could I anyhow see the latest picture taken by scanner? Now the screen is black until the scan is fully complete. In the end, it shows the LAST (200th) raw picture it took.

here is my code as it seems impossible for me to properly send it here: http://hietanen.xyz/paste/?paste=8

import cc.arduino.*;
import org.firmata.*;


import processing.video.*;
import processing.serial.*;
Serial myPort;  // Create object from Serial class
int val;      // Data received from the serial port

Capture video;


int a = 1024; // width of window
int b = 768;  // height of window
int x = 100;  // x- position text
int y = 700; // y- position text
int capnum = 0;
int countdowntimer = 10;
int globalframecount = 0;
PImage aj;
PImage bj;
PImage cj;
PImage dj;
color black = color(0);
color white = color(255);
int numPixels;

void setup() {
  String portName = Serial.list () [2];
  myPort = new Serial (this, portName, 9600);
  print(Serial.list ());
  frameRate (25);
  size(1024, 768); // Change size to 320 x 240 if too slow at 640 x 480
  strokeWeight(5);

  // This the default video input, see the GettingStartedCapture 
  // example if it creates an error
  video = new Capture(this, width, height, 30);

  // Start capturing the images from the camera
  video.start(); 

  numPixels = video.width * video.height;
  noCursor();
  smooth();
}

void draw() {
  if ( myPort.available() > 0) { 
    val = myPort.read();
  }
  if (val>0) {
    globalframecount = 1;
  }
  println(val);
  if (video.available()) {
    video.read();
    video.loadPixels();
    int threshold = 127;
    float pixelBrightness;
    loadPixels();
    for (int i = 0; i<numPixels; i++) {
      pixelBrightness = brightness(video.pixels[i]);
      if (pixelBrightness > threshold) {
        pixels [i] = white;
      } else { 
        pixels[i] = black;
      }
    }
    updatePixels();
    int testValue = get(mouseX, mouseY);
    float testBrightness = brightness(testValue);
    if (testBrightness > threshold) { // If the test location is brighter than
      fill(black); // the threshold set the fill to black
    } else { // Otherwise,
      fill(white); // set the fill to white
    }
  }



  PFont fontA = loadFont("Serif-48.vlw");
  textFont(fontA);


  noFill();

  switch(val) {

  case 's':
    globalframecount = 1;
    //  background(0);

    break;

  case 't':
    //null
    break;
  default:
    //println("Zulu");   // Prints "Zulu"
    break;
  }

  if (globalframecount == 25) {
    countdowntimer = 9;
  }
  if (globalframecount == 50) {
    countdowntimer = 8;
  }
  if (globalframecount == 75) {
    countdowntimer = 7;
  }
  if (globalframecount == 100) {
    countdowntimer = 6;
  }
  if (globalframecount == 125) {
    countdowntimer = 5;
  }
  if (globalframecount == 150) {
    countdowntimer = 4;
  }
  if (globalframecount == 175) {
    countdowntimer = 3;
  }
  if (globalframecount == 200) {
    countdowntimer = 2;
  }
  if (globalframecount == 225) {
    countdowntimer = 1;
  } 
  //    image (video, 0, 0);

  if ((globalframecount < 250) & (globalframecount > 0)) {
    textFont(fontA, 30);
    fill(0);
    text ("Preview! Get ready for your photo in "+str(countdowntimer), x+2, y);
    text ("Preview! Get ready for your photo in "+str(countdowntimer), x, y+2);
    text ("Preview! Get ready for your photo in "+str(countdowntimer), x-2, y);
    text ("Preview! Get ready for your photo in "+str(countdowntimer), x, y-2);
    textFont(fontA, 30);
    fill(255);
    text ("Preview! Get ready for your photo in "+str(countdowntimer), x, y);
    //text (countdowntimer, width-250, y);
    globalframecount++;
  }

  if ((globalframecount >= 250) & (globalframecount < 500)) {
    // image (video, 0, 0);

    if ((globalframecount > 250) & (globalframecount < 311))
    {
      textFont(fontA, 100);
      fill(0);
      text (str(countdowntimer), width/2+2, height/2);

      text (str(countdowntimer), width/2, height/2+2);

      text (str(countdowntimer), width/2-2, height/2);

      text (str(countdowntimer), width/2, height/2-2);

      fill(255);
      text (str(countdowntimer), width/2, height/2-2);
    }
    if (globalframecount == 250)
    {
      countdowntimer = 3;
    }

    if (globalframecount == 270)
    {
      countdowntimer = 2;
    }

    if (globalframecount == 290)
    {
      countdowntimer = 1;
    }

    if (globalframecount == 312) {
      background(255);
    }
    if (globalframecount == 313) {
      saveFrame(capnum+".jpeg");
      aj = loadImage(capnum+".jpeg");
      capnum++;
    }

    if ((globalframecount > 314) & (globalframecount < 373))
    {
      textFont(fontA, 100);
      fill(0);
      text (str(countdowntimer), width/2+2, height/2);

      text (str(countdowntimer), width/2, height/2+2);

      text (str(countdowntimer), width/2-2, height/2);

      text (str(countdowntimer), width/2, height/2-2);

      fill(255);
      text (str(countdowntimer), width/2, height/2-2);
    }
    if (globalframecount == 314)
    {
      countdowntimer = 3;
    }

    if (globalframecount == 335)
    {
      countdowntimer = 2;
    }

    if (globalframecount == 355)
    {
      countdowntimer = 1;
    }

    if (globalframecount == 374) {
      background(255);
    }

    if (globalframecount == 375) {
      saveFrame(capnum+".jpeg");
      bj = loadImage(capnum+".jpeg");
      capnum++;
    }

    if ((globalframecount > 375) & (globalframecount < 436))
    {
      textFont(fontA, 100);
      fill(0);
      text (str(countdowntimer), width/2+2, height/2);

      text (str(countdowntimer), width/2, height/2+2);

      text (str(countdowntimer), width/2-2, height/2);

      text (str(countdowntimer), width/2, height/2-2);

      fill(255);
      text (str(countdowntimer), width/2, height/2-2);
    }
    if (globalframecount == 376)
    {
      countdowntimer = 3;
    }

    if (globalframecount == 401)
    {
      countdowntimer = 2;
    }

    if (globalframecount == 420)
    {
      countdowntimer = 1;
    }

    if (globalframecount == 438) {
      background(255);
    }

    if (globalframecount == 439) {
      saveFrame(capnum+".jpeg");
      cj = loadImage(capnum+".jpeg");
      capnum++;
    }

    if ((globalframecount > 440) & (globalframecount < 497))
    {
      textFont(fontA, 100);
      fill(0);
      text (str(countdowntimer), width/2+2, height/2);

      text (str(countdowntimer), width/2, height/2+2);

      text (str(countdowntimer), width/2-2, height/2);

      text (str(countdowntimer), width/2, height/2-2);

      fill(255);
      text (str(countdowntimer), width/2, height/2-2);
    }
    if (globalframecount == 440)
    {
      countdowntimer = 3;
    }

    if (globalframecount == 460)
    {
      countdowntimer = 2;
    }

    if (globalframecount == 480)
    {
      countdowntimer = 1;
    }

    if (globalframecount == 497) {
      background(255);
    }    

    if (globalframecount == 498) {
      saveFrame(capnum+".jpeg");
      dj = loadImage(capnum+".jpeg");
      capnum++;
    }

    if (globalframecount == 499) {
      fill(255);
      background(0);
      rect(width/11, height/10, (width-240), (height-100));
      image(aj, width/8, height/8, width/3, height/3);
      image(bj, 4*(width/8), height/8, width/3, height/3);
      image(cj, width/8, 4*(height/8), width/3, height/3);
      image(dj, 4*(width/8), 4*(height/8), width/3, height/3);
      fill(0);
      text ("take a picture it will last longer", x, y);
      saveFrame("multipage"+capnum+".jpeg");
      globalframecount = -1;
    }


    //delay(50);
    globalframecount++;
  }
}

ERROR:

video does not run on this architecture: 64
processing.app.SketchException: video is only compatible with the  32-bit download of Processing.
    at processing.mode.java.runner.Runner.<init>(Runner.java:107)
video does not run on this architecture: 64 at processing.mode.java.JavaMode.handleLaunch(JavaMode.java:155)

    at processing.mode.java.JavaEditor$36.run(JavaEditor.java:1099)
    at java.lang.Thread.run(Thread.java:745)
processing.app.SketchException: video is only compatible with the  32-bit download of Processing.
    at processing.mode.java.runner.Runner.<init>(Runner.java:107)
    at processing.mode.java.JavaMode.handleLaunch(JavaMode.java:155)
    at processing.mode.java.JavaEditor$36.run(JavaEditor.java:1099)
    at java.lang.Thread.run(Thread.java:745)

// - Super Fast Blur v1.1 by Mario Klingemann <http://incubator.quasimondo.com>;
// - BlobDetection library

import processing.video.*;
import blobDetection.*;

Capture cam;
BlobDetection theBlobDetection;
PImage img;
boolean newFrame=false;

// ==================================================
// setup()
// ==================================================
void setup()
{
    // Size of applet
    size(640, 480);
    // Capture
    cam = new Capture(this,width,height, "USB2.0 Camera");
        // Comment the following line if you use Processing 1.5
        cam.start();

    // BlobDetection
    // img which will be sent to detection (a smaller copy of the cam frame);
    img = new PImage(80,60); 
    theBlobDetection = new BlobDetection(img.width, img.height);
    theBlobDetection.setPosDiscrimination(true);
    theBlobDetection.setThreshold(0.2f); // will detect bright areas whose luminosity > 0.2f;
}

// ==================================================
// captureEvent()
// ==================================================
void captureEvent(Capture cam)
{
    cam.read();
    newFrame = true;
}

// ==================================================
// draw()
// ==================================================
void draw()
{
    if (newFrame)
    {
        newFrame=false;
        image(cam,0,0,width,height);
        img.copy(cam, 0, 0, cam.width, cam.height, 
                0, 0, img.width, img.height);
        fastblur(img, 2);
        theBlobDetection.computeBlobs(img.pixels);
        drawBlobsAndEdges(true,true);
    }
}

// ==================================================
// drawBlobsAndEdges()
// ==================================================
void drawBlobsAndEdges(boolean drawBlobs, boolean drawEdges)
{
    noFill();
    Blob b;
    EdgeVertex eA,eB;
    for (int n=0 ; n<theBlobDetection.getBlobNb() ; n++)
    {
        b=theBlobDetection.getBlob(n);
        if (b!=null)
        {
            // Edges
            if (drawEdges)
            {
                strokeWeight(3);
                stroke(0,255,0);
                for (int m=0;m<b.getEdgeNb();m++)
                {
                    eA = b.getEdgeVertexA(m);
                    eB = b.getEdgeVertexB(m);
                    if (eA !=null && eB !=null)
                        line(
                            eA.x*width, eA.y*height, 
                            eB.x*width, eB.y*height
                            );
                }
            }

            // Blobs
            if (drawBlobs)
            {
                strokeWeight(1);
                stroke(255,0,0);
                rect(
                    b.xMin*width,b.yMin*height,
                    b.w*width,b.h*height
                    );
            }

        }

      }
}

// ==================================================
// Super Fast Blur v1.1
// by Mario Klingemann 
// <http://incubator.quasimondo.com>;
// ==================================================
void fastblur(PImage img,int radius)
{
 if (radius<1){
    return;
  }
  int w=img.width;
  int h=img.height;
  int wm=w-1;
  int hm=h-1;
  int wh=w*h;
  int div=radius+radius+1;
  int r[]=new int[wh];
  int g[]=new int[wh];
  int b[]=new int[wh];
  int rsum,gsum,bsum,x,y,i,p,p1,p2,yp,yi,yw;
  int vmin[] = new int[max(w,h)];
  int vmax[] = new int[max(w,h)];
  int[] pix=img.pixels;
  int dv[]=new int[256*div];
  for (i=0;i<256*div;i++){
    dv[i]=(i/div);
  }

  yw=yi=0;

  for (y=0;y<h;y++){
    rsum=gsum=bsum=0;
    for(i=-radius;i<=radius;i++){
      p=pix[yi+min(wm,max(i,0))];
      rsum+=(p & 0xff0000)>>16;
      gsum+=(p & 0x00ff00)>>8;
      bsum+= p & 0x0000ff;
    }
    for (x=0;x<w;x++){

      r[yi]=dv[rsum];
      g[yi]=dv[gsum];
      b[yi]=dv[bsum];

      if(y==0){
        vmin[x]=min(x+radius+1,wm);
        vmax[x]=max(x-radius,0);
      }
      p1=pix[yw+vmin[x]];
      p2=pix[yw+vmax[x]];

      rsum+=((p1 & 0xff0000)-(p2 & 0xff0000))>>16;
      gsum+=((p1 & 0x00ff00)-(p2 & 0x00ff00))>>8;
      bsum+= (p1 & 0x0000ff)-(p2 & 0x0000ff);
      yi++;
    }
    yw+=w;
  }

  for (x=0;x<w;x++){
    rsum=gsum=bsum=0;
    yp=-radius*w;
    for(i=-radius;i<=radius;i++){
      yi=max(0,yp)+x;
      rsum+=r[yi];
      gsum+=g[yi];
      bsum+=b[yi];
      yp+=w;
    }
    yi=x;
    for (y=0;y<h;y++){
      pix[yi]=0xff000000 | (dv[rsum]<<16) | (dv[gsum]<<8) | dv[bsum];
      if(x==0){
        vmin[y]=min(y+radius+1,hm)*w;
        vmax[y]=max(y-radius,0)*w;
      }
      p1=x+vmin[y];
      p2=x+vmax[y];

      rsum+=r[p1]-r[p2];
      gsum+=g[p1]-g[p2];
      bsum+=b[p1]-b[p2];

      yi+=w;
    }
  }

}